<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>购物车列表</title>
    <link rel="stylesheet" href="/css/common.css"> <!-- 引入通用 CSS -->

    <style>
        input[type="text"] {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            padding: 8px 16px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
<div>
    <h1>购物车列表</h1>
    <input type="text" id="usernameInput" placeholder="按用户名搜索" class="mb-4">
    <input type="text" id="starNameInput" placeholder="按明星姓名搜索" class="mb-4">
    <input type="text" id="titleInput" placeholder="按货品标题搜索" class="mb-4">
    <input type="text" id="productTypeInput" placeholder="按周边类别搜索" class="mb-4">
    <button onclick="searchShoppingCartsByCriteria()" class="ml-2">搜索</button>
    <table>
        <thead>
        <tr>
            <th>用户名</th>
            <th>明星姓名</th>
            <th>货品标题</th>
            <th>周边类别</th>
            <th>货品单价(元)</th>
            <th>货品运费(元)</th>
            <th>发货地址</th>
            <th>收货地址</th>
            <th>数量</th>
            <th>总价格(元)</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="shoppingCartTableBody">
        <tr th:each="shopping_cart : ${shopping_carts}">
            <td th:text="${shopping_cart.userName}"></td>
            <td th:text="${shopping_cart.starName}"></td>
            <td th:text="${shopping_cart.title}"></td>
            <td th:text="${shopping_cart.productType}"></td>
            <td th:text="${shopping_cart.prices}"></td>
            <td th:text="${shopping_cart.freight}"></td>
            <td th:text="${shopping_cart.deliveryAddress}"></td>
            <td th:text="${shopping_cart.shoppingAddress}"></td>
            <td th:text="${shopping_cart.quantity}"></td>
            <td th:text="${shopping_cart.totalPrice}"></td>
            <td>
                <form th:action="@{/shopping_carts/{id}(id=${shopping_cart.id})}" method="post">
                    <input type="hidden" name="_method" value="DELETE">
                    <input type="submit" value="删除">
                </form>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="pagination">
        <!-- 首页 -->
        <a th:if="${currentPage > 1}" th:href="@{/shoppingcart-list(page=1, size=8)}" data-page="1">首页</a>
        <!-- 上一页 -->
        <a th:if="${currentPage > 1}" th:href="@{/shoppingcart-list(page=${currentPage - 1}, size=8)}" th:data-page="${currentPage - 1}">上一页</a>
        <!-- 页码列表 -->
        <span th:each="i : ${#numbers.sequence(
        (currentPage - 2 > 0)? currentPage - 2 : 1,
        (currentPage + 2 < totalPages)? currentPage + 2 : totalPages)}"
              th:class="${i == currentPage}? 'active' : ''"
              th:text="${i}">
            <a th:href="@{/follow-list(page=${i}, size=8)}" th:data-page="${i}"></a>
        </span>
        <!-- 下一页 -->
        <a th:if="${currentPage < totalPages}" th:href="@{/shoppingcart-list(page=${currentPage + 1}, size=8)}" th:data-page="${currentPage + 1}">下一页</a>
        <!-- 尾页 -->
        <a th:if="${currentPage < totalPages}" th:href="@{/shoppingcart-list(page=${totalPages}, size=8)}" th:data-page="${totalPages}">尾页</a>
    </div>
    <div th:if="${message}" class="message" th:text="${message}"></div>
    <div th:if="${error}" class="error" th:text="${error}"></div>
    <script>
        function searchShoppingCartsByCriteria() {
            const usernameFilter = document.getElementById('usernameInput').value.toUpperCase();
            const starNameFilter = document.getElementById('starNameInput').value.toUpperCase();
            const titleFilter = document.getElementById('titleInput').value.toUpperCase();
            const productTypeFilter = document.getElementById('productTypeInput').value.toUpperCase();

            const table = document.getElementById('shoppingCartTableBody');
            const rows = table.getElementsByTagName('tr');

            for (let i = 0; i < rows.length; i++) {
                const cells = rows[i].getElementsByTagName('td');
                const username = cells[0].textContent || cells[0].innerText;
                const starName = cells[1].textContent || cells[1].innerText;
                const title = cells[2].textContent || cells[2].innerText;
                const productType = cells[3].textContent || cells[3].innerText;

                const usernameMatch = usernameFilter === '' || username.toUpperCase().indexOf(usernameFilter) > -1;
                const starNameMatch = starNameFilter === '' || starName.toUpperCase().indexOf(starNameFilter) > -1;
                const titleMatch = titleFilter === '' || title.toUpperCase().indexOf(titleFilter) > -1;
                const productTypeMatch = productTypeFilter === '' || productType.toUpperCase().indexOf(productTypeFilter) > -1;

                if (usernameMatch && starNameMatch && titleMatch && productTypeMatch) {
                    rows[i].style.display = '';
                } else {
                    rows[i].style.display = 'none';
                }
            }
        }
    </script>
</div>
</body>
</html>
